<template>
  <div class="edit">
    <a-input-number v-model:value="value" style="width: 100%"></a-input-number>
    <div class="operation">
      <span class="cancel" @click="handleCancel">Cancel</span>
      <span class="save" @click="handleSave">Save</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import phaseManagement from '@/api/phaseManagement'

const emits = defineEmits(['cancel', 'refresh'])
const props = defineProps({
  editValue: Number,
  editId: Number
})
const value = ref(props.editValue)
const id = ref(props.editId)
/**
 * 取消
 */
const handleCancel = () => emits('cancel')
/**
 * 保存
 */
const handleSave = () => {
  phaseManagement
    .updateResult({
      id: id.value,
      result: value.value
    })
    .then(res => {
      if (res.code === 2000) {
        emits('refresh')
      }
    })
}
</script>

<style scoped lang="less">
.edit {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 198px;
  height: 71px;
  background-color: @white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(93, 109, 204, 0.45);
  z-index: 999;
  padding: 7px 10px;
  box-sizing: border-box;
  .operation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 6px;
    .cancel {
      color: @text-gray;
      cursor: pointer;
    }
    .save {
      margin-left: 20px;
      color: @primary-color;
      cursor: pointer;
    }
  }
}
</style>
